@use 'src/components/style/foundation/mixins' as mixins;
@use 'src/components/style/foundation/typography' as typography;
@use 'src/components/style/foundation/colors' as colors;
@use 'src/components/style/foundation/spacing' as spacing;

:global {
  .ais-RefinementList, .ais-ToggleRefinement {
    margin-bottom: spacing.spacing(loose);
  }

  .ais-ToggleRefinement-labelText {
    cursor: pointer;
    margin-left: spacing.spacing(extra-tight);
  }

  .ais-RefinementList-list {
    display: flex;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    padding-left: 0;
    margin: 0;
  }

  .ais-RefinementList-item {
    margin-right: spacing.spacing(loose);
    margin-bottom: spacing.spacing(tight);
    list-style: none;
  }

  .ais-RefinementList-checkbox {
    position: absolute;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
  }

  .ais-RefinementList-label {
    @include mixins.link();

    &:focus {
      background: black;
    }

    &:hover {
      @include mixins.link--hover();
    }
  }

  :not(.ais-RefinementList-item--selected)
    .ais-RefinementList-checkbox:focus
    + .ais-RefinementList-labelText {
    outline-style: auto;
  }

  .ais-RefinementList-item--selected .ais-RefinementList-labelText {
    @include mixins.link--hover();
  }

  .ais-RefinementList-count {
    border-radius: 30px;
    background-color: colors.color(gray, lighter);
    color: colors.color(accent);
    font-size: typography.font-size(filter, itemCount);
    padding: 0 6px;
  }

  .theme--dark .ais-RefinementList-count {
    background-color: rgb(33, 33, 60);
  }

  .ais-RefinementList-showMore {
    @include mixins.link();

    &:hover {
      @include mixins.link--hover();
    }

    & {
      font-size: 0.9em;
    }
  }

  .ais-ToggleRefinement-checkbox {
    margin-left: 0;
  }
}
